<template>
    <div class="debris-list" v-loading="loading">
        <div class="input-box">
            <el-button type="success" class="btn" @click="createLabel">新建</el-button>
            <el-button type="primary" @click="saveLabel" v-if="changeNum > 1">保 存</el-button>
            <el-button @click="cancleSave" v-if="changeNum > 1">取 消</el-button>
        </div>

        <div class="table-box">
            <div class="title-box">
                <div class="item">英雄名</div>
                <div class="item" style="min-width:171px;">皮肤名</div>
                <div class="item">标签</div>
                <div class="item">图片</div>
                <div class="item">状态</div>
                <div class="item">操作</div>
            </div>
            <div class="content-box">
                <div class="dragging-item" v-for="(item, index) in tableData" v-dragging="{ item: item, list: tableData }" :key="index">
                    <div class="item">{{ item.heroName }}</div>
                    <div class="item">
                        <el-select v-model="item.name" style="min-width:150px;" filterable
                            :filter-method="keyWord => filterTrigger(keyWord, index)"
                            @change="value => skinChange(value, index)">
                            <el-option :label="skinItem.skinName" :value="skinItem.id" v-for="skinItem in item.skinList" :key="skinItem.id"></el-option>
                        </el-select>
                    </div>
                    <div class="item">
                        <img v-if="item.labelIcon" :src="item.labelIcon" width="63px" height="24px" alt="">
                        <span v-else>-</span>
                    </div>
                    <div class="item">
                        <imgBox :url="item.verticalPic" :width="64"/>
                    </div>
                    <div class="item">
                        <span v-if="item.status === 0" style="color:#F56C6C;">隐藏</span>
                        <span v-if="item.status === 1">展示</span>
                    </div>
                    <div class="item">
                        <div style="margin-right:10px" v-if="item.isChange">
                            <el-button type="text" size="small" @click="saveCreate(index)">保存</el-button>
                        </div>
                        <div v-else>
                            <div style="margin-right:10px" v-if="item.status === 0">
                                <el-button type="text" size="small" @click="changeStatus(item, item.id, 1)" style="color:#67C23A;">展示</el-button>
                            </div>
                            <div style="margin-right:10px" v-else>
                                <el-button type="text" size="small" @click="changeStatus(item, item.id, 0)" style="color:#F56C6C;">隐藏</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            skinList: {},
            tableData: [],
            changeNum: 0,
            loading: false
        }
    },
    created () {
        this.getList()
    },
    watch: {
        tableData: {
            handler (val) {
                this.changeNum++
            },
            deep: true
        }
    },
    methods: {
        // 获取列表
        async getList () {
            if (this.loading) return
            this.loading = true
            let params = {
                pageNum: 1,
                pageSize: 999
            }
            let res = await this.$http.get('/trade/selectHotSkin', {
                params
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.initData = JSON.parse(JSON.stringify(this.tableData))
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        filterTrigger (keyWord, index) {
            this.$http.post('/trade/selectSkinData', { keyWord }).then(res => {
                if (res.code === '0') {
                    this.$set(this.tableData[index], 'skinList', res.data)
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        skinChange (value, index) {
            let { id, status, skinList, sort } = this.tableData[index]
            let currentSkin = { id, status, skinList, sort }
            skinList.find(item => {
                if (item.id === value) {
                    let { verticalPic, labelIcon, heroName } = item
                    currentSkin = Object.assign({ verticalPic, labelIcon, heroName }, currentSkin)
                    currentSkin.skinId = item.id
                    currentSkin.name = item.skinName
                    currentSkin.isChange = true
                    this.$set(this.tableData, index, currentSkin)
                }
            })
        },
        cancleSave () {
            this.changeNum = 0
            this.tableData = JSON.parse(JSON.stringify(this.initData))
        },
        saveLabel () {
            this.$http.post('/trade/updateHotSkinSort', this.tableData).then(res => {
                if (res.code === '0') {
                    this.initData = JSON.parse(JSON.stringify(this.tableData))
                    this.changeNum = 1
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        saveCreate (index) {
            if (!this.tableData[index].name) {
                return this.$message({
                    type: 'warning',
                    message: '请选择皮肤'
                })
            }
            let params = JSON.parse(JSON.stringify(this.tableData[index]))
            delete params.skinList
            delete params.isChange
            this.$http.post('/trade/addHotSkin', params).then(res => {
                if (res.code === '0') {
                    this.getList(1)
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        createLabel () {
            let obj = {
                status: 0,
                labelIcon: null,
                sort: 0,
                name: '',
                verticalPic: '',
                isChange: true
            }
            this.tableData.unshift(obj)
        },
        changeStatus (item, id, status) {
            this.$http.post('/trade/updateHotSkinStatus', {
                id, status
            }).then(res => {
                if (res.code === '0') {
                    let message = status > 0 ? '展示成功' : '隐藏成功'
                    item.status = status
                    this.$message({
                        type: 'success',
                        message
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .debris-list {
        .input-box {
            font-size: 13px;
            font-weight: 500;
            .btn {
                margin-top: 10px;
            }
        }

        .table-box {
            margin: 20px 0;
            border: 1px solid #ebeef5;
            border-bottom: none;
            border-right: none;
            .title-box {
                display: flex;
                border-bottom: 1px solid #ebeef5;
                .item {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    padding: 10px;
                    height: 60px;
                    font-size: 14px;
                    color: #909399;
                    font-weight: bold;
                    border-right: 1px solid #ebeef5;
                }
            }

            .content-box {
                .dragging-item {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    .item {
                        flex: 1;
                        padding: 10px;
                        font-size: 14px;
                        color: #606266;
                        display: flex;
                        align-items: center;
                        border-right: 1px solid #ebeef5;
                    }
                }
            }
        }
    }
</style>
